<template>
  <div v-if="inEdit" class="property-boolean-div">
    <el-select v-model="data" placeholder="*多种*" popper-class="select-popper" @change="onChange">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
  </div>
  <div v-else class="no-edit-text">{{ label }}</div>
</template>

<script>
import props from '../mixins/props'
export default {
  name: 'PropertyBoolean',
  mixins: [props],
  props: {
    // 选项列表
    trueText: {
      type: String,
      required: false,
      default: '是'
    },
    falseText: {
      type: String,
      required: false,
      default: '否'
    }
  },
  data() {
    return {
      data: undefined,
      options: [
        {
          value: 'yes',
          label: '是'
        },
        {
          value: 'no',
          label: '否'
        }
      ]
    }
  },
  computed: {
    label() {
      const _data = this.getData(this.data)
      if (_data) {
        return _data === 'yes' ? '是' : '否'
      } else {
        return '*多种*'
      }
    }
  },
  watch: {
    value(val) {
      this.data = this.getData(val)
    }
  },
  created() {
    this.data = this.getData(this.value)
  },
  methods: {
    getData(val) {
      if (val !== null && val !== undefined) {
        try {
          return parseInt(val) ? 'yes' : 'no'
        } catch (err) {
          return undefined
        }
      } else {
        return undefined
      }
    },
    onChange(val) {
      // 更新data数据
      // this.data = val
      // 向父组件发送change消息(参数需转换为json字符串!!!)
      this.$emit('change', val === 'yes' ? '1' : '0')
    }
  }
}
</script>

<style lang="scss">
.property-boolean-div {
  .el-select {
    width: 100% !important;
  }
}
</style>
